<style lang=less>
	@import '../../assets/public.less';
	@import './bbOrder.less';
</style>
<template>
	<div class="bb_order_wrapper">
		<!--<HeaDer></HeaDer>-->
		<div class="order_container">
			<el-card class="content">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane :label="$t('bibi.listNav[0]')" name="first" class="nowDeal">
						<el-table :data="requestData1" style="width: 100%" :row-key="getRowKeys" :expand-row-keys="expands" height="600" v-loading="loading">
							<!-- 下拉菜单 start -->
							<el-table-column type="expand">
								<template slot-scope="props">
									<el-form label-position="right" inline class="demo-table-expand drop_down">
										<!--成交时间-->
										<el-form-item :label="$t('bibi.list1[0]')">
											<span v-if="props.row.trade_time==0">--</span>
											<span v-else>{{ $public.timestampToTime(props.row.trade_time) }}</span>
										</el-form-item>
										<!--成交价格-->
										<el-form-item :label="$t('bibi.list1[1]')">
											<span>{{ props.row.cjprice }}</span>
										</el-form-item>
										<!--数量-->
										<el-form-item :label="$t('bibi.list1[2]')">
											<span>{{ props.row.cjnum }}</span>
										</el-form-item>
										<!--成交额-->
										<el-form-item :label="$t('bibi.list1[3]')">
											<span>{{ props.row.totalprice }}</span>
										</el-form-item>
										<!--手续费-->
										<el-form-item :label="$t('bibi.list1[4]')">
											<span>{{ props.row.fee }}</span>
										</el-form-item>
										<!--<el-form-item label="类型">
											<span v-if="props.row.otype ==1">限价</span>
											<span v-else>市价</span>
										</el-form-item>-->
									</el-form>
								</template>
							</el-table-column>
							<!-- 下拉菜单 end -->
							<!--委托时间-->
							<el-table-column prop="add_time" :label="$t('bibi.list1[5]')">
								<template slot-scope="scope">
									<div>{{ $public.timestampToTime(scope.row.add_time) }}</div>
								</template>
							</el-table-column>
							<!--交易对象-->
							<el-table-column prop="pname" :label="$t('bibi.list1[6]')">
							</el-table-column>
							<!--方向-->
							<el-table-column prop="type" :label="$t('bibi.list1[7]')">
								<template slot-scope="scope">
									<div v-if="scope.row.type == 1 " class="green">{{$t('bibi.status[0]')}}</div>
									<div v-else class="red">{{$t('bibi.status[1]')}}</div>
								</template>
							</el-table-column>
							<!--类型-->
							<el-table-column prop="otype" :label="$t('bibi.list1[8]')">
								<template slot-scope="scope">
									<span v-if="scope.row.otype ==1">{{$t('bibi.status[2]')}}</span>
									<span v-else>{{$t('bibi.status[3]')}}</span>
								</template>
							</el-table-column>
							<!--委托价格-->
							<el-table-column prop="wtprice" :label="$t('bibi.list1[9]')">
							</el-table-column>
							<!--委托数量-->
							<el-table-column prop="wtnum" :label="$t('bibi.list1[10]')">
							</el-table-column>
							<!--状态-->
							<el-table-column prop="status" :label="$t('bibi.list1[11]')">
								<template slot-scope="scope">
									<div v-if="scope.row.status == 0">{{$t('bibi.status[4]')}}</div>
									<div v-else-if="scope.row.status == 1">{{$t('bibi.status[5]')}}</div>
									<div v-else-if="scope.row.status == 2">{{$t('bibi.status[6]')}}</div>
									<div v-else>{{$t('bibi.status[7]')}}</div>
								</template>
							</el-table-column>
							<!--操作-->
							<el-table-column prop="id" :label="$t('bibi.list1[12]')">
								<template slot-scope="scope">
									<el-button v-if="scope.row.status==0 ||	 scope.row.status==1" @click.native.prevent="deleteRow(scope, requestData1)" type="primary" plain size="small">
										<span>{{$t('bibi.status[8]')}}</span>
									</el-button>
									<el-button v-else disabled @click.native.prevent="deleteRow(scope, requestData1)" type="primary" plain size="small">
										<span>{{$t('bibi.status[8]')}}</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane :label="$t('bibi.listNav[1]')" name="second" class="historyWt">
						<el-table :data="requestData2" style="width: 100%" height="600" v-loading="loading">
							<!-- 下拉菜单 start -->
							<el-table-column type="expand">
								<template slot-scope="props">
									<el-form label-position="left" inline class="demo-table-expand drop_down">
										<!--成交时间-->
										<el-form-item :label="$t('bibi.list2[0]')">
											<span>{{ $public.timestampToTime(props.row.trade_time) }}</span>
										</el-form-item>
										<!--成交价格-->
										<el-form-item :label="$t('bibi.list2[1]')">
											<span>{{ props.row.cjprice }}</span>
										</el-form-item>
										<!--成交数量-->
										<el-form-item :label="$t('bibi.list2[2]')">
											<span>{{ props.row.cjnum }}</span>
										</el-form-item>
										<!--成交额-->
										<el-form-item :label="$t('bibi.list2[3]')">
											<span>{{ props.row.totalprice }}</span>
										</el-form-item>
										<!--手续费-->
										<el-form-item :label="$t('bibi.list2[4]')">
											<span>{{ props.row.fee }}</span>
										</el-form-item>
										<!--类型-->
										<el-form-item :label="$t('bibi.list2[5]')">
											<span v-if="props.row.otype ==1">{{$t('bibi.status[2]')}}</span>
											<span v-else>{{$t('bibi.status[3]')}}</span>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<!-- 下拉菜单 end -->
							<!--委托时间-->
							<el-table-column prop="add_time" :label="$t('bibi.list2[6]')">
								<template slot-scope="scope">
									<div>{{ $public.timestampToTime(scope.row.add_time) }}</div>
								</template>
							</el-table-column>
							<!--、交易对象-->
							<el-table-column prop="pname" :label="$t('bibi.list2[7]')">
							</el-table-column>
							<!--方向-->
							<el-table-column prop="type" :label="$t('bibi.list2[8]')">
								<template slot-scope="scope">
									<div v-if="scope.row.type == 1 " class="green">{{$t('bibi.status[0]')}}</div>
									<div v-else class="red">{{$t('bibi.status[1]')}}</div>
								</template>
							</el-table-column>
							<!--委托价格-->
							<el-table-column prop="wtprice" :label="$t('bibi.list2[9]')">
							</el-table-column>
							<!--委托量-->
							<el-table-column prop="wtnum" :label="$t('bibi.list2[10]')">
								<template slot-scope="scope">
									<div v-if="scope.row.wtnum > 0 ">{{ scope.row.wtnum }}</div>
									<div v-else>{{ scope.row.totalprice }}</div>
								</template>
							</el-table-column>
							<!--状态-->
							<el-table-column prop="status" :label="$t('bibi.list2[11]')">
								<template slot-scope="scope">
									<div v-if="scope.row.status == 0">{{$t('bibi.status[4]')}}</div>
									<div v-else-if="scope.row.status == 1">{{$t('bibi.status[5]')}}</div>
									<div v-else-if="scope.row.status == 2">{{$t('bibi.status[6]')}}</div>
									<div v-else>{{$t('bibi.status[7]')}}</div>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
				<div class="right">
					<div class="bitType">{{$t('bibi.soso[0]')}}</div>
					
					<span>/</span>
					<el-select v-model="selectValue" :placeholder="$t('bibi.soso[1]')">
						<el-option key="" :label="$t('bibi.soso[2]')" value="">
						</el-option>
						<el-option v-for="(v,item) in getCoinLIstData" :key="item" :label="v.pname" :value="v.mark">
						</el-option>
					</el-select>
					<el-button @click="searchBtn" type="primary">{{$t('bibi.soso[3]')}}</el-button>
				</div>
			</el-card>
		</div>
		<!--<FooTer></FooTer>-->
	</div>
</template>
<script>
	//	import Header from "../../header/heaer.vue";
	//	import Footer from "../../footer/footer.vue";
	export default {
		data() {
			return {
				loading: true,
				isActive: true,
				show: true,
				activeName: 'first',
				requestData1: [],
				requestData2: [],
				options: [{
					mark: 'USDT',
					pname: 'USDT'
				}],
				selectLabel: '',
				selectValue: '',
				expands: [], // 要展开的行，数值的元素是row的key值
				getCoinLIstData:[], //code
			}
		},
		methods: {
			getRowKeys(row) { // 获取每行的orderid
				return row.orders_id;
			},
			offTime() {
				//
				this.requestPublic(3, 'requestData1');
			},
			handleClick(tab, event) { // 切换事件
				var _this = this;
				_this.getBitType();
				_this.loading = true;
				if(_this.activeName == 'first') {
					_this.requestPublic(3, 'requestData1', null);
				} else {
					_this.requestPublic(4, 'requestData2', null);
				}
			},
			deleteRow(scope, rows) { // 撤单请求
				var _this = this;
				_this.$confirm(_this.$t("bibi.tisi[0]"), _this.$t("bibi.tisi[1]"), {
					confirmButtonText: _this.$t("bibi.tisi[2]"),
					cancelButtonText: _this.$t("bibi.tisi[3]"),
					type: 'warning'
				}).then(() => {
					var orders_id = scope.row.orders_id;
					var mobile = sessionStorage.getItem('mobile');
					_this.$http.post(_this.$http.dealCancel, {
							'mobile': mobile,
							'order_id': orders_id
						})
						.then((res) => {
							if(res.data.status == 200) {
								rows.splice(scope.$index, 1);
								_this.$message({
									message: res.data.msg,
									type: 'success'
								});
							} else {
								_this.$message({
									message: res.data.msg,
									type: 'warning'
								});
							}
						});
				}).catch(() => {
					_this.$message({
						type: 'info',
						message: _this.$t("bibi.tisi[4]")
					});
				});
			},
			searchBtn() { // 搜索按钮事件
				var _this = this;
				//				if(_this.selectValue == '') {
				//					_this.$public.msg('搜索值为空，请选择搜索条件', 'warning', _this);
				//				} else {
				//					
				//				}

				_this.loading = true;
				if(_this.activeName == 'first') {
					_this.requestPublic(3, 'requestData1', _this.selectValue);
				} else {
					_this.requestPublic(4, 'requestData2', _this.selectValue);
				}
			},
			getBitType: function() { // 获取币种信息
				var _this = this;
				_this.$http.post(_this.$http.getPro, {})
					.then((res) => {
						_this.selectLabel = res.data.data[0].pname;
						//						_this.selectValue = res.data.data[0].mark;
						_this.selectValue = '';
						_this.options = res.data.data;
					});
			},
			requestPublic: function(status, dataType, code) { // 默认请求、初始化请求
				var _this = this;
				var dataType = dataType;
				var mobile = sessionStorage.getItem('mobile');
				_this.$http.post(_this.$http.tranlist, {
						mobile: mobile,
						status: status,
						code: code
					})
					.then((res) => {
						_this.requestData1 = [];
						_this.requestData2 = [];
						setTimeout(function() {
							_this[eval('dataType')] = res.data.data;
							_this.loading = false;
							if(_this.requestData1.length >= 1) { // 默认打开委托第一行
								_this.expands.push(_this.requestData1[0].orders_id);
							}
						}, 500);
					});
			},
			getCoinLIst() {
				var _this = this;

				_this.$http.post(_this.$http.getPro, {}).then(function(response) {
					if(response.data.status == "200") {
						_this.getCoinLIstData =response.data.data; 
						console.log(_this.getCoinLIstData);
					}
				}).catch(function(error) {});

			}
		},
		created: function() {
			var _this = this;
			_this.getBitType();
			_this.requestPublic(3, 'requestData1');
			_this.getCoinLIst();
			if(!sessionStorage.account){
				this.loading = false;
			}
		},
		//		components: {
		//			"HeaDer": Header,
		//			"FooTer": Footer,
		//		}
	}
</script>